<template>
	<view>
		<view class="" :style="'height: '+statusBarHeight+'px;'"></view>
		<view class="facilitytop">
			<view class="" @click="btnsel(1)">
				<view class="" :class="selline==1?'linename':''">设备</view>
				<view class="line" :class="selline==1?'isline':''"></view>
			</view>
			<view class="" @click="btnsel(2)">
				<view class="" :class="selline==2?'linename':''">多拨号</view>
				<view class="line" :class="selline==2?'isline':''"></view>
			</view>
		</view>
		<view class="addlist flex-between">
			<view class="flex-between">
				<view class="navlist" v-for="(item,index) in navlist" :key="index" :class="isnav==index?'islist':''"
					@click="btnnav(index)">{{item.name}}</view>
			</view>
			<image src="../../static/addp.png" mode="" @click="$fun.jump(`./addfacility`)"></image>
		</view>
		<view class="group flex-between">
			<view class="group_left flex" @click="showmodel = true">
				<view class="">分组</view>
				<image src="../../static/wallet/down.png" mode=""></image>
			</view>
			<view class="group_right" @click="$fun.jump(`./group`)">
				分组管理
			</view>
		</view>
		<u-overlay :show="showmodel" @click="showmodel = false">
			<view class="model">
				<view class="model_name">分组1</view>
				<view class="model_line"></view>
				<view class="model_name">取消</view>
			</view>
		</u-overlay>
		<view class="earnings flex">
			<view class="">总收益 1,000.91</view>
			<view class="" style="margin-left: 50rpx;">昨日收益 10.00</view>
		</view>
		<view class="facilitylist" @click="$fun.jump(`./details`)">
			<view class="facilitylist_top flex-between">
				<view class="flex">
					<image src="../../static/off-line.png" mode=""></image>
					<view class="" style="width: 340rpx;">
						<u--text size='14' :lines="1" text="32_HH_CAB7FF5F3B46325"></u--text>
					</view>
				</view>
				<view class="facilitylist_top_right flex">
					<view class="" style="margin-right: 12rpx;">分组</view>
					<image src="../../static/Fromabove.png" mode=""></image>
				</view>
			</view>
			<view class="line"></view>
			<view class="facilitylist_bottom flex">
				<view class="box">
					<view class="name">总收益</view>
					<view class="num">123456.02</view>
				</view>
				<view class="box">
					<view class="name">昨日收益</view>
					<view class="num">123456.02</view>
				</view>
				<view class="box">
					<view class="name">今日收益</view>
					<view class="num">123456.02</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				selline: 1,
				navlist: [{
						name: '全部'
					},
					{
						name: '在线'
					},
					{
						name: '离线'
					},
					{
						name: '故障'
					}
				],
				isnav: 0,
				showmodel: false
			}
		},
		methods: {
			btnsel(e) {
				this.selline = e
			},
			btnnav(index) {
				this.isnav = index
			}
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background-image: url('../../static/wallet/bg@2x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.facilitytop {
		width: 750rpx;
		height: 88rpx;
		border-radius: 1rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #999999;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.linename {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
		}

		.line {
			margin: 20rpx auto 0;
			height: 8rpx;
		}

		.isline {
			width: 36rpx;
			height: 8rpx;
			background: #9999FF;
			border-radius: 4rpx;
			margin: 20rpx auto 0;
			transform: translate(0);
			transition-duration: 300ms;
		}
	}

	.addlist {
		width: 750rpx;
		height: 88rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		align-items: center;

		image {
			width: 162rpx;
			height: 48rpx;
		}
	}

	.navlist {
		width: 100rpx;
		height: 48rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 48rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.islist {
		width: 100rpx;
		height: 48rpx;
		background: #9999FF;
		border-radius: 27rpx;
		color: #FFFFFF;
	}

	.group {
		margin: 30rpx 30rpx 30rpx;

		&_left {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			align-items: center;

			image {
				width: 28rpx;
				height: 28rpx;
				margin-left: 7rpx;
			}
		}

		&_right {
			width: 128rpx;
			height: 48rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			line-height: 48rpx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #9999FF;
		}
	}

	.earnings {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin: 0 30rpx;
	}

	.facilitylist {
		width: 710rpx;
		height: 183rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		margin: 30rpx auto 0;

		&_top {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			padding: 27rpx 0 22rpx 30rpx;

			image {
				width: 56rpx;
				height: 32rpx;
				margin-right: 10rpx;
			}

			&_right {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;

				image {
					width: 64rpx;
					height: 64rpx;
					margin: -27rpx 0 0;
				}
			}
		}

		&_bottom {
			padding: 20rpx;

			.box {
				width: 33%;
			}

			.name {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}

			.num {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
			}
		}

		.line {
			width: 710rpx;
			height: 2rpx;
			background: #EAEAEA;
		}
	}

	.model {
		width: 750rpx;
		// height: 384rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;

		&_name {
			width: 750rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}

		&_line {
			width: 750rpx;
			height: 16rpx;
			background: #F1F3F6;
		}
	}
</style>